1px border边框实现

发表于

由于移动端手机像素密度的差异,1px宽度的边框在不同的DPI下展示会有差异,可以通过下面这个方法来解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!--解决1px边框-->
<!--@ SASS语法-->
@mixin border-1px($color){
  position: relative;
  &:after{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid $color;
    content: '';
  }
}

<!--然后设置 统一的类 缩放-->
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px{
    &:after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px{
    &:after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}